<template>
	<view class="tab_top_box">
		<view class="index" :class="[fixed?'i_fixed':'',after?'no_after':'']" :style="{color:color || '#333333',backgroundColor:bgColor||'#FFFFFF'}">
			<view class="nav_back" @tap="drawBack()">
				<image :src="imgSrc || '/static/login/back.png'"  mode=""></image>
			</view>
			{{title}}
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				key: ''
			}
		},
		methods: {
			drawBack() {
				console.log(this.page);
				uni.navigateBack({
					delta: this.page*1 || 1,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				});
			}
		},
		mounted() {

		},
		computed: {

		},
		/**
		 * title 头部名字  fixed 为 true 为 定位到顶部 'color',//字体颜色 'bgColor',//背景颜色 'imgSrc'//返回键图片路径
		 */
		props: [
			'title',
			'fixed',
			'color',//字体颜色
			'bgColor',//背景颜色
			'imgSrc',//返回键图片路径
			'after',
			'page'
		]

	}
</script>

<style lang="scss" scoped>
	.tab_top_box {
		width: 100vw;
		height: 86upx;
		.i_fixed {
			position: fixed !important;
			z-index: 99;
			left: 0;
			top: var(--status-bar-height);
			
		}

		.index {
			position: relative;
			font-size: 36upx !important;
			background: #FFFFFF;
			width: 100%;
			height: 86upx;
			line-height: 86upx;
			text-align: center;
		}

		.index:after {
			content: '';
			height: 1upx;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			transform: scaleY(0.5);
			background: #E5E5E5;
		}
		.no_after:after{
			height: 0 !important;
		}
		.nav_back {
			position: absolute;

			left: 0;
			top: 0;
			height: 100%;
			width: 120upx;
		}

		.nav_back image {
			position: absolute;
			width: 32upx;
			height: 32upx;
			left: 27upx;
			top: 27upx;
		}
	}
</style>
